<!--
 * @Author: 哈尔滨大拐 3181845089@qq.com
 * @Date: 2022-07-23 10:13:13
 * @LastEditors: 哈尔滨大拐 3181845089@qq.com
 * @LastEditTime: 2022-08-08 14:42:07
 * @FilePath: \mygit\个人网站\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <!-- 公共样式文件 -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- 主要样式 -->
    <link rel="stylesheet" href="./css/blog-single.css">
</head>

<body>

    <header id="header">
        <div class="container flex align-items-center justify-content-between">
            <a href="./index.html"><img class="logo" src="./images/logo.png" alt=""></a>
            <nav id="navbar" class="navbar">
                <ul>
                    <li class="index "><a href="./index.html">首页</a></li>
                    <li class="protfolio"><a href="./protfolio.html">作品展示</a></li>
                    <li class="blogs active"><a href="./blogs.html">博客</a></li>
                    <li class="about"><a href="./about.html">我的简历</a></li>
                    <li class="contact"><a href="./contact.html">联系我</a></li>
                </ul>
            </nav>
        </div>
    </header>


    <!-- 背景图片 -->
    <div class="backgroundimg"></div>
    <!-- End -->
    <!-- 文章部分 -->
    <section class="article ">

        <div class="head flex justify-content-between">
            <div class="leftword">区块链钱包安全指南</div>
            <div class="rightword">发表于:2022-07-15</div>
        </div>

        <div>
            <div class="content">
                文章区域
            </div>
            <div class="img">
                <img src="./images/blog-single/p2.png" alt="">
            </div>

        </div>



        <div class="End flex justify-content-between">
            <div class="left flex align-items-center">
                <div class="label">标签</div>
                <button class="btn1" style="background-color: #7ECEF4;">Travel</button>
                <button style="background-color:#EB6877;">December</button>
                <button>Adventure</button>
                <button style="background-color:#F39800;">Fun</button>
            </div>
            <div class="right">
                <div class="label1">
                    <p>分享到</p>
                    <a href="https://www.baidu.com/"><img class="img" src="./images/blog-single/l1.png" alt=""></a>
                    <img class="img" src="./images/blog-single/l2.png" alt="">
                    <img class="img" src="./images/blog-single/l3.png" alt="">
                    <img class="img" src="./images/blog-single/l4.png" alt="">

                </div>

            </div>
        </div>
    </section>

    <!-- End -->

    <section id="leaveAMessage">
        <ul id="message">
            <!-- <li class="message-list">
             <div class="personalInformation flex justify-content-between  align-items-center">
                 <div class="flex align-items-center justify-content-between">
                     <img src="./images/blog-single/t.png" alt="">
                     <div class="name">xx</div>
                 </div>
                 <div class="date ">2022-03-27</div>
             </div>
             <div class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
         </li>
         <li class="message-list">
             <div class="personalInformation flex justify-content-between  align-items-center">
                 <div class="flex align-items-center justify-content-between">
                     <img src="./images/blog-single/个人头像1x.png" alt="">
                     <div class="name">xx</div>
                 </div>
                 <div class="date ">2022-03-27</div>
             </div>
             <div class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
         </li>
         <li class="message-list">
             <div class="personalInformation flex justify-content-between  align-items-center">
                 <div class="flex align-items-center justify-content-between">
                     <img src="./images/blog-single/个人头像1x.png" alt="">
                     <div class="name">xx</div>
                 </div>
                 <div class="date ">2022-03-27</div>
             </div>
             <div class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
         </li> -->

        </ul>
        <button class="btn all-message-btn">查看所有评论</button>
        <div class="messageArea">
            <p>评论</p>
            <div class="inputs flex ">
                <input id="nickname" type="text" placeholder="称呼">
                <input id="email" type="text" placeholder="Email">
            </div>
            <input class="messageBoard" type="text" placeholder="请输入留言">
            <button class=" release">发布</button>
        </div>
    </section>

    <div id="up" hidden></div>

    <!-- ======= Footer ======= -->
    <footer>
        <div id="footer">
            <p class="foot">© Copyright 王小明. All Rights Reserved</p>
        </div>
    </footer>
    <!-- End Footer -->

    <div id="up" hidden></div>
    <!-- axios -->
    <script src="./js/main1.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="./js/blog-single.js"></script>
</body>

</html>